<template>
  <div class="receipt-verify-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>智能票据鉴真中心</span>
      </div>
      
      <el-table
        v-loading="loading"
        :data="receiptList"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="报销人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="department"
          label="部门"
          width="120">
        </el-table-column>
        <el-table-column
          prop="date"
          label="招待日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          width="100">
        </el-table-column>
        <el-table-column
          prop="uploadTime"
          label="上传时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleView(scope.row)">查看凭证</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleVerify(scope.row)"
              :disabled="scope.row.status !== '待验证'">开始验证</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    
    <!-- 查看凭证对话框 -->
    <el-dialog title="查看凭证" :visible.sync="viewDialogVisible" width="70%">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="报销人">{{ currentReceipt.userName }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ currentReceipt.department }}</el-descriptions-item>
        <el-descriptions-item label="招待日期">{{ currentReceipt.date }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{ currentReceipt.amount }} 元</el-descriptions-item>
        <el-descriptions-item label="招待事由" :span="2">{{ currentReceipt.reason }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="receipt-images" v-if="currentReceipt.id">
        <div class="image-container">
          <h4>支付凭证</h4>
          <el-image 
            style="width: 100%; max-height: 300px" 
            :src="currentReceipt.paymentReceiptUrl" 
            :preview-src-list="[currentReceipt.paymentReceiptUrl]">
          </el-image>
        </div>
        <div class="image-container">
          <h4>发票</h4>
          <el-image 
            style="width: 100%; max-height: 300px" 
            :src="currentReceipt.invoiceUrl" 
            :preview-src-list="[currentReceipt.invoiceUrl]">
          </el-image>
        </div>
      </div>
    </el-dialog>
    
    <!-- 验证结果对话框 -->
    <el-dialog title="验证结果" :visible.sync="verifyDialogVisible" width="70%">
      <div v-loading="verifying">
        <div v-if="!verifying && verifyResult">
          <el-result
            :icon="verifyResult.pass ? 'success' : 'error'"
            :title="verifyResult.pass ? '验证通过' : '验证不通过'"
            :sub-title="verifyResult.message">
          </el-result>
          
          <el-divider content-position="center">详细验证结果</el-divider>
          
          <el-descriptions title="图像分析结果" :column="1" border>
            <el-descriptions-item label="PS痕迹检测">
              <el-tag :type="verifyResult.psDetection ? 'danger' : 'success'">
                {{ verifyResult.psDetection ? '发现PS痕迹' : '未发现PS痕迹' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="金额一致性">
              <el-tag :type="verifyResult.amountConsistency ? 'success' : 'danger'">
                {{ verifyResult.amountConsistency ? '金额一致' : '金额不一致' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="图像真实性">
              <el-progress 
                :percentage="verifyResult.imageAuthenticityScore" 
                :status="verifyResult.imageAuthenticityScore > 80 ? 'success' : 'exception'">
              </el-progress>
            </el-descriptions-item>
            <el-descriptions-item label="验证结论">
              {{ verifyResult.conclusion }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="verifyDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSaveResult" :disabled="verifying || !verifyResult">保存结果</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReceiptVerify',
  data() {
    return {
      loading: false,
      receiptList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      viewDialogVisible: false,
      verifyDialogVisible: false,
      currentReceipt: {},
      verifying: false,
      verifyResult: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      this.loading = true
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        const mockData = []
        for (let i = 1; i <= 20; i++) {
          mockData.push({
            id: i,
            userName: `用户${i}`,
            department: i % 3 === 0 ? '财务部' : (i % 3 === 1 ? '市场部' : '技术部'),
            date: `2023-0${Math.floor(i / 4) + 1}-${(i % 28) + 1}`,
            amount: (Math.random() * 1000 + 100).toFixed(2),
            reason: `项目${i}业务招待`,
            uploadTime: `2023-0${Math.floor(i / 4) + 1}-${(i % 28) + 1} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60)}:${Math.floor(Math.random() * 60)}`,
            status: i % 4 === 0 ? '已验证' : (i % 4 === 1 ? '待验证' : (i % 4 === 2 ? '验证中' : '验证失败')),
            paymentReceiptUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            invoiceUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
          })
        }
        
        this.receiptList = mockData
        this.total = 100
        this.loading = false
      }, 1000)
      
      // 实际项目中应该是这样的API调用
      // try {
      //   const { data } = await this.$http.get('/receipt/list', {
      //     params: {
      //       page: this.currentPage,
      //       pageSize: this.pageSize
      //     }
      //   })
      //   if (data.code === 0) {
      //     this.receiptList = data.data.list
      //     this.total = data.data.total
      //   } else {
      //     this.$message.error(data.message || '获取数据失败')
      //   }
      // } catch (error) {
      //   this.$message.error('获取数据失败')
      // } finally {
      //   this.loading = false
      // }
    },
    
    // 获取状态类型
    getStatusType(status) {
      switch (status) {
        case '已验证':
          return 'success'
        case '待验证':
          return 'info'
        case '验证中':
          return 'warning'
        case '验证失败':
          return 'danger'
        default:
          return 'info'
      }
    },
    
    // 查看凭证
    handleView(row) {
      this.currentReceipt = { ...row }
      this.viewDialogVisible = true
    },
    
    // 开始验证
    handleVerify(row) {
      this.currentReceipt = { ...row }
      this.verifyDialogVisible = true
      this.verifying = true
      this.verifyResult = null
      
      // 模拟验证过程
      setTimeout(() => {
        // 随机生成验证结果
        const pass = Math.random() > 0.3
        const psDetection = Math.random() > 0.7
        const amountConsistency = Math.random() > 0.2
        const imageAuthenticityScore = Math.floor(Math.random() * 40) + (pass ? 60 : 20)
        
        this.verifyResult = {
          pass,
          message: pass ? '凭证验证通过，未发现异常' : '凭证验证不通过，发现异常',
          psDetection,
          amountConsistency,
          imageAuthenticityScore,
          conclusion: pass ? '该电子凭证真实有效，可以进行报销' : '该电子凭证存在异常，不建议报销'
        }
        
        this.verifying = false
      }, 2000)
      
      // 实际项目中应该是这样的API调用
      // try {
      //   const { data } = await this.$http.post('/receipt/verify', { id: row.id })
      //   if (data.code === 0) {
      //     this.verifyResult = data.data
      //   } else {
      //     this.$message.error(data.message || '验证失败')
      //   }
      // } catch (error) {
      //   this.$message.error('验证失败')
      // } finally {
      //   this.verifying = false
      // }
    },
    
    // 保存验证结果
    handleSaveResult() {
      this.$message.success('验证结果已保存')
      this.verifyDialogVisible = false
      
      // 更新列表中的状态
      const index = this.receiptList.findIndex(item => item.id === this.currentReceipt.id)
      if (index !== -1) {
        this.receiptList[index].status = this.verifyResult.pass ? '已验证' : '验证失败'
      }
      
      // 实际项目中应该是这样的API调用
      // try {
      //   await this.$http.post('/receipt/save-result', {
      //     id: this.currentReceipt.id,
      //     result: this.verifyResult
      //   })
      //   this.$message.success('验证结果已保存')
      //   this.verifyDialogVisible = false
      //   this.fetchData() // 重新获取数据
      // } catch (error) {
      //   this.$message.error('保存结果失败')
      // }
    },
    
    // 页码改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    
    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.receipt-verify-container {
  padding: 20px 0;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.receipt-images {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.image-container {
  width: 48%;
}

h4 {
  margin-bottom: 10px;
}
</style> 